import React, { Component } from 'react'
import {Form,Input,Button,Message} from 'antd'

//想把新添加的菜单放到state的menu里面，然后显示名称实现删除功能
const {TextArea}=Input;//解构
class addPizza extends Component {
    handleSubmit=()=>{
        //onsole.log(this.props.form);
        this.props.form.validateFields((err,value)=>{
            //console.log(value);
            if(!err){
                const {name,description,size1,price1,size2,price2}=value;
                let data={
                    name,
                    description,
                    options:[
                     {
                         size:size1,
                         price:price1
                     },
                     {
                        size:size2,
                        price:price2
                     }]
                };
                console.log(data);
                //window.location.href='/#/menus';
                //网络请求  还没研究怎么把数据存进去
                // Request('/menu.json',{
                //     method:'post',
                //     data
                // }).then(res=>{
                //     if(res&&res.status===200&&res.data){
                //         Message.success('添加成功');
                //         window.location.href='/#/menus';
                //     }else{
                //         Message.success('添加失败');
                //     }
                // })
            }
        });
    };
    render() { 
        const {getFieldDecorator}=this.props.form;
        //实现数据双向绑定
        const required=true;
        //input要被包裹在里面
        return (
            <div>
                <h3><strong>添加新的pizza</strong></h3>
                <Form  onSubmit={this.handleSubmit} >
                    <Form.Item label='品种' >
                        {getFieldDecorator('name',{
                            rules:[{
                                required,
                                message:'请输入品种'
                            }]
                        })(
                            <Input></Input>
                        )}
                    </Form.Item>
                    <Form.Item label='描述'>
                        {getFieldDecorator('description')(<TextArea/>)}
                    </Form.Item>
                    <p>
                        <strong>选项1：</strong>
                    </p>
                    <Form.Item label='尺寸'>
                    {getFieldDecorator('size1',{
                            rules:[{
                                required,
                                message:'请输入尺寸'
                            }]
                        })(
                            <Input></Input>
                        )}
                    </Form.Item>
                    <Form.Item label='价格'>
                    {getFieldDecorator('price1',{
                            rules:[{
                                required,
                                message:'请输入价格'
                            }]
                        })(
                            <Input></Input>
                        )}
                    </Form.Item>
                    <p>
                        <strong>选项2：</strong>
                    </p>
                    <Form.Item label='尺寸'>
                    {getFieldDecorator('size2',{
                            rules:[{
                                required,
                                message:'请输入尺寸'
                            }]
                        })(
                            <Input></Input>
                        )}
                    </Form.Item>
                    <Form.Item label='价格'>
                        {getFieldDecorator('price2',{
                                rules:[{
                                    required,
                                    message:'请输入价格'
                                }]
                            })(
                                <Input></Input>
                            )}
                    </Form.Item>
                    <Form.Item >
                        <Button type="primary"  htmlType="submit" style={{width:'100%'}}>
                            添加
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}
export default Form.create()(addPizza)